<template>
  <div class="specil-wrap">
    <div class="specil-banner">
    </div>
    <div class="margin-align">
      <!-- 项目背景 -->
      <div class="program-setting">
        <div class="main-title main-title-margin">项目背景</div>
        <div class="setting">根据《国务院办公厅关于深化产教融合的若干意见》（国发办﹝2017﹞95号）、《工信部办公厅 人社部办公厅关于印发工业通信业职业技能提升行动计划实施方案的通知》（工信厅联人函﹝2020﹞130号）文件要求，为加快数字人材培养，计划面向厦门制造业数字化人才培养开发设计系列课程，由国科联合华为、国际顶尖智能制造咨询公司派出技术力量，组织我市企业技术人员以及高校科研人员，对行业内细分需求进行调查，统一规划课程体系、设计课程提交标准，组织编写、研发教学数字化资源和教材，分类输出厦门制造行业认知课、厦门制造业信息化基础课、厦门制造业信息系统应用与实践课、新一代数字化技术在厦门制造业的应用课和厦门头部制造业发展分析专题课。</div>
        <div class="program-info">
          <div class="program-item" v-for="item in sepcilProjectList" :key="item.title">
            <img :src="item.imgUrl">
            <div class="title">{{item.title}}</div>
            <div class="intro">{{item.desc}}</div>
          </div>
        </div>
      </div>
      <!-- 课程 第一种显示方式-->
      <div class="course-first-show">
        <div class="show-item">
          <div class="main-title main-title-margin">{{courseDirectionList[0].directionName}}</div>
          <div class="course-item padding-margin" v-for="item in courseDirectionList[0].courseList" :key="item.title" @click="goCourseDetail(item.rData)">
            <div class="course-pic">
              <img :src="item.imgUrl">
            </div>
            <div class="course-info">
              <div class="course-top">
                <div class="course-title">{{item.title}}</div>
                <div class="course-intro">{{item.intro}}</div>
              </div>
              <div class="course-label-total">
                <div class="course-label" v-for="label in item.labelList" :key="label">{{label}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="show-item">
          <div class="main-title main-title-margin">{{courseDirectionList[4].directionName}}</div>
          <div class="course-item padding-margin" v-for="item in courseDirectionList[4].courseList" :key="item.title" @click="goCourseDetail(item.rData)">
            <div class="course-pic">
              <img :src="item.imgUrl">
            </div>
            <div class="course-info">
              <div class="course-top">
                <div class="course-title">{{item.title}}</div>
                <div class="course-intro">{{item.intro}}</div>
              </div>
              <div class="course-label-total">
                <div class="course-label" v-for="label in item.labelList" :key="label">{{label}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 课程 第二种显示方式-->
      <div class="course-second-show">
        <div class="main-title main-title-margin">{{courseDirectionList[2].directionName}}</div>
        <div class="inline-block padding-margin">
          <div class="course-item float-left content-content" v-for="item in courseDirectionList[2].courseList" :key="item.title" @click="goCourseDetail(item.rData)">
            <div class="course-pic">
              <img :src="item.imgUrl">
            </div>
            <div class="course-info">
              <div class="course-top">
                <div class="course-title">{{item.title}}</div>
                <div class="course-intro">{{item.intro}}</div>
              </div>
              <div class="course-label-total">
                <div class="course-label" v-for="label in item.labelList" :key="label">{{label}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="course-second-show">
        <div class="main-title main-title-margin">{{courseDirectionList[3].directionName}}</div>
        <div class="inline-block padding-margin">
          <div class="course-item float-left content-content" v-for="item in courseDirectionList[3].courseList" :key="item.title" @click="goCourseDetail(item.rData)">
            <div class="course-pic">
              <img :src="item.imgUrl">
            </div>
            <div class="course-info">
              <div class="course-top">
                <div class="course-title">{{item.title}}</div>
                <div class="course-intro">{{item.intro}}</div>
              </div>
              <div class="course-label-total">
                <div class="course-label" v-for="label in item.labelList" :key="label">{{label}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 课程 第三种显示方式-->
      <div class="course-third-show">
        <div class="main-title main-title-margin">{{courseDirectionList[1].directionName}}</div>
        <div class="inline-block third-show">
          <VueSlickCarousel :arrows="false" :dots="false" :slidesToShow="5" :rows="1" :autoplay="true" :slidesToScroll="1" :draggable="true" @click="goCourseDetail(item.rData)">
            <div class="course-item content-content" v-for="item in courseDirectionList[1].courseList" :key="item.title" @click="goCourseDetail(item.rData)">
              <div class="course-pic">
                <img :src="item.imgUrl">
              </div>
              <div class="course-info course-info-vertical">
                <div class="course-top">
                  <div class="course-title">{{item.title}}</div>
                  <div class="course-intro">{{item.intro}}</div>
                </div>
                <div class="course-label-total">
                  <div class="course-label" v-for="label in item.labelList" :key="label">{{label}}</div>
                </div>
              </div>
            </div>
          </VueSlickCarousel>
        </div>
      </div>
      <!-- 里程碑计划 -->
      <div class="milestore-plan">
        <div class="main-title main-title-margin">里程碑计划</div>
        <div class="milestore-intro">厦门市委组织部、厦门市人力资源和社会保障局、厦门市工业和信息化局与华为公司及其合作伙伴福建国科信息科技公司签署三方“产业转型升级人才培养基地合作框架协议”</div>
        <div class="milestore-pic">
          <img src="/img/talents/specil/milestore.png">
        </div>
      </div>
      <!-- 厦门产业数字化人才培养基地成果展示数据 -->
      <div class="show-data">
        <div class="main-title main-title-margin">厦门产业数字化人才培养基地成果展示数据</div>
        <div class="data-show-pic">
          <img :src="item" v-for="item in talentDataPic" :key="item">
        </div>
        <!-- <div class="show-data-pic">
          <div class="pic-left">
            <img :src="item" v-for="item in talentDataPic" :key="item">
          </div>
          <div class="pic-right">
            <div class="pic-textz" v-for="item in talentDataList" :key="item.title">
              <div class="pic-text">
                <div class="pic-data">{{item.title}}</div>
                <div class="pic-data">{{item.num}}</div>
              </div>
              <img :src="item.icon" class="pic-icon">
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import talents from '@/api/talents'
export default {
  layout: 'teach',
  data () {
    return {
      sepcilProjectList: talents.sepcilProjectList,
      courseDirectionList: talents.courseDirectionList,
      talentDataPic: talents.talentDataPic,
      talentDataList: talents.talentDataList
    }
  },
  components: { VueSlickCarousel },
  methods: {
    // 跳转到课程详情
    goCourseDetail (rData) {
      let url = 'https://edu.gxj.xm.gov.cn/auth-login?r=' + rData
      window.open(url,'_blank')
    }
  }
}
</script>
<style lang="stylus" scoped>
.specil-wrap {
  padding-bottom: 60px;
  background-color: #F6F6F6
  .specil-banner {
    background: url('/img/talents/specil/banner.png') no-repeat center;
    height: 303px;
    background-color: #4575fe;
  }
  .program-setting {
    width: 100%;
    background: #FFFFFF;
    border-radius: 16px;
    margin-top: 30px;
    padding-bottom: 33px
    .setting {
      font-size: 16px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #404040;
      background: #FAFAFA;
      border-radius: 8px;
      padding: 30px 20px;
      line-height: 36px;
      margin: 0 20px;
    }
    .program-info {
      display: inline-block;
      padding: 20px 20px 0 20px;
      border-top: 1px solid #F1F1F1;
      margin-top: 20px 
      .program-item {
        float:left;
        width: 372px;
        margin-right: 42px;
        padding-right: 42px;
        border-right: 1px solid #F1F1F1
        &:last-child {
           margin-right: 0;
           padding-right: 0;
           width: 330px;
           border: none
        }
        img {
          width: 330px;
          height: 210px
        }
        .title {
          font-size: 24px;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #101010;
          margin-top: 24px
        }
        .intro {
          font-size: 14px;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #A1A1A1;
          margin-top: 17px;;
          line-height: 28px;
        }
      }
    }
  }
  .course-first-show {
    display: inline-block;
    margin-top: 30px
    .show-item {
      width: 590px;
      background: #FFFFFF;
      border-radius: 16px;
      float: left;
      margin-right: 20px
      &:last-child {
        margin-right: 0
      }
    }
  }
  .course-second-show {
    background: #FFFFFF;
    border-radius: 16px;
    margin-top: 30px
    .content-content {
      padding-right: 29px;
      border-right: 1px solid #f1f1f1;
      &:nth-child(even) {
        padding-right: 0;
        padding-left: 29px;
        margin-right: 0;
        border: none
      }
      &:nth-child(-n+2) {
        padding-bottom: 20px;
        border-bottom: 1px solid #f1f1f1;
      }
      &:nth-child(n+3){
        padding-top: 20px
      }
    }
  }
  .course-third-show{
    margin-top: 30px;
    background: #FFFFFF;
    border-radius: 16px;
    .third-show {
      margin: 0 20px;
      padding-bottom: 10px;
      /deep/ .slick-list {
        width: 1180px;
        height: 310px;
      }
      /deep/ .slick-slide {
        // width: 216px !important;
        // margin-right: 20px;
        // &:nth-child(5) {
        //   margin-right: 0
        // }
      }
      .course-pic {
        border-radius: 8px 8px 0 0;
        img {
          border-radius: 8px 8px 0 0;
        } 
      }
    }
    .content-content {
      display: inline-block;
      width: 216px;
      margin-right: 20px;
      .course-title {
        width: 100%;
        margin-top: 20px
      }
      .course-intro {
        width: 100%;
        margin-top: 15px
      }

    }
  }
  .milestore-plan {
    margin-top: 30px;
    background: #FFFFFF;
    border-radius: 16px;
    .milestore-intro {
      padding: 30px 20px;
      margin: 0 20px;
      background: #FAFAFA;
      border-radius: 8px;
      font-size: 16px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #404040;
      line-height: 36px;
    }
    .milestore-pic {
      width: 100%;
      margin-top: 30px;
      padding-bottom: 20px;
      img {
        width: 100%;
        height: 108px
      }
    }
  }
}
</style>
